<template>
	<view class="zy_table_container">
		<scroll-view scroll-x="true">
			<!-- 表头数据 -->
			<view class="zy_table" :style="[{width:`${tableWidth?tableWidth:'100%'}`}]">
				<view class="zy_tr">
					<!-- 多选框 -->
					<view :class="border==true? 'zy_th index':'zy_noth index'" v-if="checkboxShow">
						<view v-if="this.dataList.length != 0">
							<checkbox-group @change="handleSelectionChange($event, 1)">
								<checkbox :checked="multipleSelection.length === dataList.length" value="all" />
							</checkbox-group>
						</view>
						<view v-else>
							<checkbox-group @change="handleSelectionChange($event, 1)">
								<checkbox :checked="multipleSelection.length === '0'" value="all" />
							</checkbox-group>
						</view>
					</view>
					<!-- 单选框 -->
					<view :class="border==true? 'zy_th index':'zy_noth index'" v-if="radioShow"></view>
					<!-- 序列号 -->
					<view :class="border==true? 'zy_th index':'zy_noth index'" v-if="indexShow">序号</view>
					<!-- 表格数据 -->
					<view :class="border==true? 'zy_th':'zy_noth'" :style="[{width:`${item.width?item.width:'50%'}`}]"
						v-for="(item,index) in headList" :key="index">
						<view class="zy_sort">
							<view class="zy_sort_edit" v-if="item.edit">
								<i class="iconfont icon-bianji" style="color: red;"></i>
							</view>
							<view class="zy_sort_span">
								{{item.name}}
							</view>
							<!-- 排序 -->
							<view class="zy_sort_icon" @click="sort(item)" v-if="item.sort">
								<i class="iconfont icon-xiangshang"
									:class="sortType === item.key && sortValue ?'zy_sort_icon_blue':'zy_sort_icon_black'"></i>
								<i class="iconfont icon-xiangxia"
									:class="sortType === item.key && !sortValue ?'zy_sort_icon_blue':'zy_sort_icon_black'"></i>
							</view>
						</view>
					</view>
					<!-- 表格操作 -->
					<view :class="border==true? 'zy_th':'zy_noth'"
						:style="[{width:`${operationWidth?operationWidth:'100px'}`}]" v-if="operationShow">
						操作
					</view>
				</view>
			</view>
			<!-- 表格数据不为空 -->
			<template v-if="this.dataList.length!=0">
				<scroll-view scroll-y="true"
					:style="`min-height: 10vh;max-height:calc(${scrollHeight?scrollHeight:'100'}vh - 80rpx);width:${tableWidth?tableWidth:'100%'}`">
					<view class="zy_table">
						<view class="zy_tr" v-for="(item,index) in dataList" :key="index"
							:class="{zy_table_linebg:lineClickShow == true&&item.id == lineId}"
							@click="lineClick(item,index)">
							<!-- 多选框 -->
							<view :class="border==true? 'zy_th index':'zy_noth index'" v-if="checkboxShow">
								<checkbox-group @change="handleSelectionChange($event, 0, item.id)">
									<checkbox :checked="selectionChecked(item.id)" :value="item.id + ''" />
								</checkbox-group>
							</view>
							<!--单选框 -->
							<view :class="border==true? 'zy_th index':'zy_noth index'" v-if="radioShow">
								<radio-group @change="radioChange($event)">
									<radio :value="item" :checked="index === current" />
								</radio-group>
							</view>
							<!-- 序列号 -->
							<view :class="border==true? 'zy_th index':'zy_noth index'" v-if="indexShow">{{index+1}}
							</view>
							<!-- 表格数据 -->
							<view v-for="(h, i) of headList" :class="border==true? 'zy_td':'zy_notd'"
								:style="[{width:`${h.width?h.width:'50%'}`}]">
								<!-- 表格数据为图片 -->
								<view v-if="h.keyType==='img'" class="zy_td_img">
									<span v-if="h.key==''||!item[h.key]">--</span>
									<image v-else :src="item[h.key]" style="width: 100%;height: 100%;"></image>
								</view>
								<!-- 表格数据为图标 -->
								<view v-else-if="h.keyType==='icon'">
									<uni-icons :type="item[h.key]" size="26" color="#409EFF">
									</uni-icons>
								</view>
								<!-- 表格数据为手机号码 -->
								<view v-else-if="h.keyType==='tel'">
									<span @click="makePhoneCall(item)" class="zy_td_tel">{{item[h.key]}}</span>
								</view>
								<!-- 表格数据为文字 -->
								<view v-else>
									<input v-if="h.edit==true" class="zy_td_input" v-model="item[h.key]"
										:disabled="!h.edit" :focus="focus" @confirm="editConfirm(item)" />
									<span v-else @click="edit(item,h)">{{item[h.key]}}</span>
								</view>
								<!-- 表格数据为空 -->
								<view v-if="h.key==''||!item[h.key]&&h.keyType!=='img'">--</view>
							</view>
							<!-- 表格操作 -->
							<view :class="border==true? 'zy_td':'zy_notd'"
								:style="[{width:`${operationWidth?operationWidth:'100px'}`}]" v-if="operationShow">
								<view class="zy_td_operation">
									<view v-for="(j, k) of operationList">
										<!-- 开关按钮 -->
										<switch v-if="j.kind==='switch'" @change="j.handle(item,index,$event)"
											style="transform:scale(0.7)" />
										<!-- 按钮 -->
										<button v-if="j.kind==='button'" :type="j.type" :size="j.size || size"
											:disabled="item.switch" @click='j.handle(item,index)'
											class="zy_td_Btn">{{j.label}}</button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</template>
		</scroll-view>
		<!-- 表格数据为空 -->
		<template v-if="!this.dataList.length">
			<view class="zy_table_noData">暂无数据</view>
		</template>
		<!-- 表格分页器 -->
		<template v-if="paginationShow">
			<uni-pagination class="zy_table_page" :total="pageTotal" :pageSize="pageSize" @change="paginationChange" />
		</template>
	</view>
</template>

<script>
	import pinyin from './js/characterToPinyin.js'
	import {
		isEqual
	} from './js/objEqual.js'
	export default {
		name: 'multiSelect',
		emits: ['handleSelectionChange', 'radioChange', 'lineClick', 'editConfirm', 'paginationChange'],
		props: {
			//表格边框
			border: {
				type: Boolean,
				default: false
			},
			//表格y轴上高度
			scrollHeight: {
				type: Number,
			},
			//表格宽度
			tableWidth: {
				type: String,
			},
			//表格操作列宽度
			operationWidth: {
				type: String,
			},
			//表头数据
			headList: {
				type: Array,
			},
			//表格所有数据长度
			pageTotal: {
				type: Number,
			},
			//表格每页显示数据量
			pageSize: {
				type: Number,
				default: 10
			},
			//表格数据
			dataList: {
				type: Array,
			},
			//多选框是否显示
			checkboxShow: {
				type: Boolean,
				default: false
			},
			//单选框是否显示
			radioShow: {
				type: Boolean,
				default: false
			},
			//点击行事件是否显示
			lineClickShow: {
				type: Boolean,
				default: false
			},
			//序号是否显示
			indexShow: {
				type: Boolean,
				default: false
			},
			//操作列是否显示
			operationShow: {
				type: Boolean,
				default: false
			},
			//操作列数据
			operationList: {
				type: Array,
				default: () => []
			},
			//操作列按钮多种形态：default、primary、warn
			type: {
				type: String,
				default: 'default'
			},
			// 操作列按钮尺寸：mini,medium
			size: {
				type: String,
				default: 'mini'
			},
			//分页是否显示
			paginationShow: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				sortType: '',
				sortValue: 0,
				multipleSelection: [], //默认多选框初始状态
				current: '', //默认单选框初始状态
				lineId: '1',
				editShow: false,
				focus: false, //可编辑列的focus初始状态
			};
		},
		methods: {
			//表格列变编辑
			edit(item, h) {
				this.editShow = true
			},
			//表格排序
			sort(e) {
				this.sortValue = this.sortType === e.key ? !this.sortValue : 0;
				this.sortType = e.key;
				this.dataList.sort((a, b) => {
					// let obj=[]
					// obj.push(a[e.key])
					// console.log(obj)
					// var numReg = /^[0-9]*$/
					// var numRe = new RegExp(numReg)
					// if (!numRe.test(this.sortValue)) {
					// let type = e.key
					// var x = pinyin.getSpell(a[e.key].charAt(0), function(charactor, spell) {
					// 	return spell[1]
					// }).charAt(0).charCodeAt()
					// var y = pinyin.getSpell(b[e.key].charAt(0), function(charactor, spell) {
					// 	return spell[1]
					// }).charAt(0).charCodeAt();
					// return this.sortValue ? x - y : y - x
					// } else {
					//只针对该列字符串是数字有效
					return this.sortValue ? a[e.key] - b[e.key] : b[e.key] - a[e.key];
					// }
				});
			},


			//表格多选框事件
			selectionChecked(id) {
				return !!~this.multipleSelection.findIndex(o => o.id === id);
			},
			handleSelectionChange(e, type, id) {
				const {
					detail: {
						value
					}
				} = e;
				// 全选被点击
				if (type === 1) {
					// 选中
					if (value.length) {
						this.multipleSelection = this.deepClone(this.dataList);
						// 取消选中
					} else {
						this.multipleSelection = [];
					}
					// 非全选被点击
				} else {
					const i = this.multipleSelection.findIndex(o => o.id === id);
					// 选中
					if (value.length) {
						this.multipleSelection.push(this.dataList.find(o => o.id === id));
						// 取消选中
					} else {
						this.multipleSelection.splice(i, 1);
					}
				}
				this.$emit('handleSelectionChange', {
					value: this.multipleSelection
				})
			},
			// 深度克隆
			deepClone(obj) {
				// 对常见的“非”值，直接返回原来值
				if ([null, undefined, NaN, false].includes(obj)) return obj;
				if (typeof obj !== 'object' && typeof obj !== 'function') {
					//原始类型直接返回
					return obj;
				}
				var o = this.isArray(obj) ? [] : {};
				for (let i in obj) {
					if (obj.hasOwnProperty(i)) {
						o[i] = typeof obj[i] === 'object' ? this.deepClone(obj[i]) : obj[i];
					}
				}
				return o;
			},
			// 判断arr是否为一个数组，返回一个bool值
			isArray(arr) {
				return Object.prototype.toString.call(arr) === '[object Array]';
			},
			//表格单选框事件
			radioChange($event) {
				for (let i = 0; i < this.dataList.length; i++) {
					if (this.dataList[i].id === $event.detail.value.id) {
						this.current = i;
						this.$emit('radioChange', {
							value: $event.detail.value
						})
						break;
					}
				}
			},
			//单击选中行事件
			lineClick(item, index) {
				if (this.lineClickShow == true) {
					this.lineId = item.id
					this.$emit('lineClick', {
						value: item,
						index: index
					})
				}
			},
			//表格编辑
			editConfirm(item) {
				this.focus = false
				this.$emit('editConfirm', item)
			},
			//表格电话拨打
			makePhoneCall(item) {
				console.log(item)
				uni.makePhoneCall({
					phoneNumber: item.tel //仅为示例
				});
			},
			// 分页点击事件
			paginationChange(e) {
				let index = Number(e.current - 1) * this.pageSize
				let length = Number(e.current) * this.pageSize
				this.$emit('paginationChange', {
					value: e,
					index: index,
					length: length,
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>
